<html>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
    <title>Conversational Form – Turn your content into conversations – by SPACE10</title>
    <meta property="og:title" content="Conversational Form – Turn your content into conversations – by SPACE10">
    <meta property="og:site_name" content="Conversational Form">
    <meta property="og:url" content="https://space10-community.github.io/conversational-form/landingpage/">
    <meta property="og:description" content="Conversational Form is an open-source tool from SPACE10 that enables people to turn your content into conversations.">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://space10-community.github.io/conversational-form/landingpage/cf-og.png">

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-69941652-5"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      window.gtag = function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-69941652-5');
    </script>
<body>
  <div class="wrapper">
    <header>
      <div>
        <a href="https://github.com/space10-community/conversational-form" target="_blank" class="btnRollUpAnim">
          <span>GitHub</span>
          <span>GitHub</span>
        </a>
      </div>
      <div>
        <a href="https://space10-community.github.io/conversational-form/docs/1.0.0/getting-started/" target="_blank" class="btnRollUpAnim">
          <span>Documentation</span>
          <span>Documentation</span>
        </a>
      </div>
      <div>
        <a href="https://medium.com/@space10/introducing-conversational-form-1-0-922404b2ea2e" target="_blank" class="btnRollUpAnim">
          <span>About</span>
          <span>About</span>
        </a>
      </div>
    </header>
    <main>
      <h1><span>Turn your</span><br />
      <div class="content">
          <div class="content__container">
            <ul class="content__container__list">
              <li class="content__container__list__item">content</li>
              <li class="content__container__list__item">surveys</li>
              <li class="content__container__list__item">sales</li>
              <li class="content__container__list__item">research</li>
            </ul>
          </div>
        </div>
        <span>into conversations</span>
      </h1>
      <form action="" class="form">
        <input cf-questions="Conversational Form is an open-source concept from SPACE10.&&It can turn any form element on a web page into a beautiful conversational experience.&&Would you like to learn more?" cf-label="Yes" type="radio" name="getstarted" value="yes">
        <input cf-label="No" type="radio" name="getstarted" value="no">

        <cf-robot-message name="ending" cf-conditional-getstarted="no" cf-questions="Understood.&&If you get curious regardless, check out the documentation to start making your own conversational experiences today."></cf-robot-message>

        <fieldset cf-questions="You can also add images as responses!">
          <input cf-label="Future Food" type="radio" cf-image="./photo1.jpg" name="imageAnswer" value="0">
          <input cf-label="SolarVille" type="radio" cf-image="./photo2.jpg" name="imageAnswer" value="1">
          <input cf-label="Urban Village" type="radio" cf-image="./photo3.jpg" name="imageAnswer" value="2">
        </fieldset>


        <fieldset cf-questions="Nice! We've added some new features in V1.0 like smoother animations and some prebuilt themes.">
          <input cf-label="Dark" type="radio" name="theme" value="conversational-form-dark.min.css" checked>
          <input cf-label="Light" type="radio" name="theme" value="conversational-form.min.css">
          <input cf-label="Green" type="radio" name="theme" value="conversational-form-green.min.css">
          <input cf-label="Purple" type="radio" name="theme" value="conversational-form-purple.min.css">
          <input cf-label="Blue" type="radio" name="theme" value="conversational-form-irisblue.min.css">
          <input cf-label="Red" type="radio" name="theme" value="conversational-form-red.min.css">
        </fieldset>

        <fieldset cf-questions="Awesome. You can click the previous answer to change the theme again.">
          <!-- <input type="radio" cf-label="Let me try that." name="changeThemeAgain" value="yes"> -->
          <input type="radio" cf-label="No thanks" name="changeThemeAgain" value="no">
        </fieldset>
    </form>
      <div class="cf"></div>

      <div class="row">
        <div class="about">
          <p>Conversational Form is an open-source tool from <a href="https://space10.io" target="_blank"><strong>SPACE10</strong></a> that enables people to turn information into conversations—be it report insights, application flows or something completely different altogether. Try Conversational Form to jumpstart a conversation and make your content more engaging today.</p>
          <p>
            <a href="https://space10-community.github.io/conversational-form/docs/1.0.0/getting-started/" target="_blank" class="button btnRollUpAnim">
              <span>Documentation</span>
              <span>Documentation</span>
            </a>
          </p>
        </div>
      </div>
    </main>
    <footer>
      <p>
        Copyright © 2019 <a href="https://space10.io" target="_blank">SPACE10</a>.<br />
        All rights reserved.
      </p>
      <p>
        V1.0.0<br />
        <a href="https://space10-community.github.io/conversational-form/" target="_blank">Github</a>
      </p>
      <p>
        Licensed under MIT<br />
        Documentation CC BY 3.0
      </p>
    </footer>
  </div>
  <script src="./main.js"></script>
</body>
</html>
